<template>
  <div class="container">
    <div>
      <el-card>
        <page-tool ref="PageTools" :show="true" :total="page.total" :btn="'新增标签'" :title="'标签名称'"
          @showDialog="showDialog = true" @clear="clear">
          <template v-slot:left> </template>
          <template v-slot:btn>
            <el-button type="primary" size="small" @click="search">搜索</el-button>
          </template>

          <template v-slot:right> </template>
          <template> </template>
        </page-tool>
        <el-table :data="formData">
          <el-table-column type="index" label="序号" width=""></el-table-column>
          <el-table-column label="所属学科" prop="subjectName" width=""></el-table-column>
          <el-table-column label="标签名称" prop="tagName" width=""></el-table-column>
          <el-table-column label="创建者" prop="username" width=""></el-table-column>
          <el-table-column label="创建日期" prop="addDate" width="">
            <template v-slot="{ row }">
              {{ row.addDate | parseTime  }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state" width="" :formatter="formatBaseApi"></el-table-column>
          <el-table-column label="操作" width="">
            <template slot-scope="{ row }">
              <el-button type="text" @click="changeState(row)">{{
                  formData.state ? "禁用" : "启用"
              }}</el-button>
              <el-button type="text" :disabled="formData.state === 1" @click="edit(row)">修改</el-button>
              <el-button type="text" :disabled="formData.state === 1" @click="remove(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination background @size-change="SizeChange" @current-change="CurrentChange" :current-page="page.page"
            :page-sizes="page.sizes" :page-size="page.pagesize" layout="prev,pager,next,sizes, jumper"
            :total="page.total"></el-pagination>
        </el-row>
      </el-card>
      <!-- 弹框 -->
      <el-dialog :title="showTitle" :visible.sync="showDialog" @close="btnCancel" width="400px">
        <el-form ref="subject" :model="subject" :rules="rules" label-width="80px">
          <el-form-item label="所属学科" prop="subjectID">
            <el-select v-model="subject.subjectID" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in formData" :key="item.id" :label="item.subjectName"
                :value="item.subjectID"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName">
            <el-input v-model="subject.tagName" placeholder="请输入目录名称" style="width: 100%"></el-input>
          </el-form-item>
        </el-form>
        <el-row slot="footer" type="flex" justify="end">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOk">确认</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import PageTool from '../components/page-tool.vue'
import { list, remove, add, detail, update, changeState } from '@/api/hmmm/tags'
import baseApi from '@/api/base/baseApi'
export default {
  components: {
    PageTool
  },
  data() {
    return {
      page: {
        page: 1,
        pagesize: 10,
        sizes: [5, 10, 20, 50],
        tagName: '',
        total: 0
      },
      formData: [],
      subject: {
        id: null,
        tagName: '',
        subjectID: ''
      },
      rules: {
        subjectID: [{ required: true, message: '不能为空', trigger: 'blur' }],
        tagName: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      showDialog: false
    }
  },
  created() {
    this.list()
  },
  computed: {
    showTitle() {
      return this.subject.id ? '编辑标签' : '新增标签'
    }
  },
  methods: {
    CurrentChange(newPage) {
      this.page.page = newPage
      this.list()
    },
    SizeChange(newSize) {
      this.page.pagesize = newSize
      this.list()
    },
    async list() {
      const { data } = await list(this.page)
      this.page.total = data.counts
      this.formData = data.items
    },
    formatBaseApi(row, column, cellValue, index) {
      const res = baseApi.status.find((item) => +item.id === cellValue)
      this.formData.state = cellValue
      return res ? res.value : '未知'
    },
    // 删除
    async remove(id) {
      try {
        await this.$confirm('确认删除吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(id)
        this.list()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑
    async edit(row) {
      const { data } = await detail(row)
      this.subject = data
      this.showDialog = true
    },
    btnOk() {
      this.$refs.subject.validate(async (isOk) => {
        if (isOk) {
          if (this.subject.id) {
            // 编辑
            await update(this.subject)
          } else {
            // 新增
            await add(this.subject)
          }
          this.list()
          this.showDialog = false
          this.$message.success(`${this.subject.id ? '编辑' : '新增'}成功`)
        }
      })
    },
    btnCancel() {
      this.showDialog = false
      this.$refs.subject.resetFields()
      setTimeout(() => {
        this.subject = {
          id: null,
          tagName: '',
          subjectID: 0
        }
      }, 300)
    },
    // 状态切换
    async changeState(row) {
      row.state = row.state ? 0 : 1
      const res = await changeState({ id: row.id, state: row.state })
      console.log(res)
    },
    // 全部获取
    async search() {
      const res = await list(this.page)
      const { data } = await list({ page: 1, pagesize: res.data.counts })
      this.formData = await this.$refs.PageTools.search(data.items)
    },
    clear() {
      this.list()
    }
  }
}
</script>

<style scoped lang='less'>

</style>
